<template>
	<view class="fanslistBox">
		<view class="box2_list_" v-for="(newItem,newIndex) in userArr" :key="newIndex">
			<view class="box2_list" @click="gpPage(newItem.url)">
				<view class="list_image">
					<image :src="newItem.avatar"></image>
				</view>
				<view class="list_name">
					<view class="name">{{newItem.nickname}}</view>
					<!-- @click.stop="ff_tast(newItem.address)" -->
					<view class="name_" >{{newItem.gender == 1 ? "男性" : newItem.gender == 2 ? "女性" : "未知"}} · {{newItem.age}}岁 · {{newItem.address}}</view>
				</view>
				<!-- // 0:相互关注 未关注1: 2:单方面关注 -->
				<view class="state">
					<view class="state1" v-if="newItem.state == 1" @click.stop="userFollowx(newItem.fansId)">
						关注
					</view>
					<view class="state2" v-if="newItem.state == 0" @click.stop="userFollowx(newItem.fansId)">
						<image src="https://z3.ax1x.com/2021/08/31/hUg58S.png"></image>
						<text>相互关注</text>
					</view>
					<view class="state3" v-if="newItem.state == 2" @click.stop="userFollowx(newItem.fansId)">
						已关注
					</view>
				</view>
			</view>
		</view>
		<loading :toast="loadStatux" :title="'暂无面粉'"></loading>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				loadText: {
					loadmore: '已经到底了',
					loading: '努力加载中',
					nomore: '已经到底了'
				},
			}
		},
		props:{
			userArr:{
				type:Array
			},
			loadStatux:{
				type:String
			}
		},
		created() {
					
					console.log(this.userArr)
				},
		watch:{
			// userArr(newVal,older){
			// 	console.log("到组件的数据====》",newVal)
			// },
			userArr: {
			　　　　handler(newValue, oldValue) {
				// debugger
			// 　　　　　　console.log(newValue)
			　　　　},
			　　　　deep: true
			　　}
		},
		methods:{
			gpPage(url){
				uni.navigateTo({
					url:url
				})
			},
			userFollowx(userId){
				this.$emit('userFollows',userId);
			},
			ff_tast(text){
				uni.showToast({
					title: text,
					icon: "none"
				})
			}
		}
	}
</script>

<style lang="scss">
	.fanslistBox{
		min-height: calc(100vh - 200rpx);
		padding-bottom: 40rpx;
		box-sizing: border-box;
	}
	.box2_list_ {
		width: 750rpx;
		border-bottom: 2rpx solid #f5f6f9;

		.box2_list {
			width: 670rpx;
			height: 160rpx;
			position: relative;
			margin: 0 40rpx;
			display: flex;
			/* line-height: 160rpx; */
		}

		.list_image {
			margin-top: 24rpx;
			margin-right: 24rpx;
			display: inline-block;
			vertical-align: top;
		}

		.list_image image {
			width: 112rpx;
			height: 112rpx;
			border-radius: 50%;
		}

		.list_name {
			display: inline-block;
			margin-top: 36rpx;
			vertical-align: top;
			overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
		    flex: 0 0 355rpx;
		}

		.name {
			color: #2d3034;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 44rpx;
			overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
		}

		.name_ {
			margin-top: 4rpx;
			color: #606266;
			font-size: 26rpx;
			line-height: 38rpx;
		}

		.state {
			display: inline-block;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}

		.state1 {
			padding: 0 13rpx;
			background: #f10200;
			border-radius: 4px;
			color: #ffffff;
			font-size: 26rpx;
			height: 45rpx;
			line-height: 45rpx;
		}

		.state2 {
			background: #f10200;
			border-radius: 4px;
			color: #000000;
			font-size: 26rpx;
			height: 45rpx;
			line-height: 45rpx;
			padding: 0 13rpx;
			display: flex;
			align-items: center;

		}

		.state2 image {
			vertical-align: top;
			width: 26rpx;
			height: 28rpx;
			margin-right: 8rpx;
		}

		.state2 text {
			position: relative;
			// top: -4rpx;
			color: #000000;
			font-weight: 700;
		}

		.state3 {
			padding: 0 13rpx;
			background: #909499;
			border-radius: 4px;
			color: #ffffff;
			font-size: 26rpx;
			height: 45rpx;
			line-height: 45rpx;
		}
	}
</style>
